import osuLogo from '../../assets/osu-logo.jpg';
import malodyLogo from '../../assets/malody-logo.jpg';
import { useTranslation } from '../../common/i18n';
import './styles.less';

export const SupportedGame = () => {
  const { t } = useTranslation();
  return (
    <div className="support-game-container">
      <section>
        <h1>{t('app-support_game')}</h1>
        <p>
          osu!mania,
          osu!taiko,
        </p>
        <p>
          malody - key mode
        </p>
      </section>
      <section>
        <img className="game-logo" alt="osu-logo" src={osuLogo} />
        <img className="game-logo" alt="malody-logo" src={malodyLogo} />
      </section>
    </div>
  );
};
